<template>
  <el-menu theme="dark" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
    <el-row type="flex" class="row-bg" justify="space-between">
      <el-menu-item index="1">金融信息可视化中心</el-menu-item>

        <div v-if="hasLogin" class="topbar-info" >
          <span class="welcome">{{user.name}}欢迎你</span>
          <span class="welcome">|</span>
          <el-button type="default" size="small" @click="toLogout">退出</el-button>
        </div>
        <div v-else class="topbar-info">
          <el-button type="primary" size="small"  @click="toLogin">登录</el-button>
        </div>
    </el-row>
    
  </el-menu>

</template>

<script>
  import { mapActions } from 'vuex';
  // import { mapState } from 'vuex'
  export default {
    data() {
      return {
        // 会把计算属性覆盖？？？
        // hasLogin: this.$store.state.user.hasLogin
      };
    },
    computed: { 
      hasLogin() {
        return this.$store.state.login.hasLogin
      },
      user() {
        return this.$store.state.user;
      }
    },
    methods: {
      ...mapActions(['enableLogin', 'logOut', 'loginFail']),
      // mapActions(...['enableLogin', 'logOut', 'loginFail']),

      toLogin() {
        // 映射 this.enableLogin() 为 this.$store.dispatch('enableLogin')
        this.enableLogin();
      },
      toLogout() {
        this.logOut();
        this.loginFail();
        this.$router.replace({path: '/'});
      }
    }
  }
</script>

<style>
.topbar-info {
  justify-content:center;
  align-items:center;
  display:-webkit-flex;
  margin-right:15px;
}
.welcome {
  color:white;
  padding: 5px;
}
</style>
